<template>
	<div class="ui-inputnumber">
		<div class="ui-inputnumber_wrap">
			<input type="number" :value="value" :min="min" :max="max" @change="onChange" :class="{ warn: warn }" />
		</div>
		<div class="ui-inputnumber_spwrap">
			<div class="ui-inputnumber_add" @click="onAdd">+</div>
			<div class="ui-inputnumber_dec" @click="onDec">-</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'YInputNumber',
	data() {
		return {
			warn: false,
		}
	},
	props: {
		value: {
			type: Number,
		},
		min: {
			type: Number,
			default: 0,
		},
		max: {
			type: Number,
			default: 10000000,
		},
	},
	methods: {
		onAdd() {
			this.$emit('input', Math.min(this.value + 1, this.max))
			this.$emit('change')
			this.warn = false
		},
		onDec() {
			this.$emit('input', Math.max(this.value - 1, this.min))
			this.$emit('change')
			this.warn = false
		},
		onChange(e) {
			let value = e.target.value
			value = parseInt(value) || 0
			if (value >= this.min && value <= this.max) {
				this.$emit('input', value)
				this.$emit('change', e)
				this.warn = false
			} else {
				this.warn = true

				this.$msgbox({
					title: '数据校验',
					message: '数据检查结果: 输入的数值超出范围 !',
					iconClass: 'el-icon-success',
				})
				console.warn('输入的数值超出范围')
			}
		},
	},
}
</script>
